<template>
	<div class="main">
		<Header :title="title"></Header>
		<div class="area tablearea">
			<Operate></Operate>
			<div class="categorytable">
				<div class="Theader">
					<div class="numbers">编号</div>
					<div class="codes">编码</div>
					<div class="categorys">类别名称</div>
					<div class="sorts">排序</div>
					<div class="operates">操作</div>
				</div>
				<div
					class="Tbodys"
					v-for="(item, index) in viewcategorys"
					:key="item.id"
				>
					<div class="numbers">{{ index + 1 }}</div>
					<div class="codes">{{ item.code }}</div>
					<div class="categorys">{{ item.type }}</div>
					<div class="sorts">{{ item.sort }}</div>
					<div class="operates">
												<span>
							修改
						</span>
						<span @click="delOne(item._id)">
							删除
						</span>
					</div>
				</div>
				<Footer :uurl="uurl"></Footer>
			</div>
		</div>
	</div>
</template>

<script>
// 导入Footer组件
import Header from "@/components/goods/header"
import Operate from "@/components/goods/operate"
import Footer from "@/components/goods/footer"

export default {
	data() {
		return {
			title: "商品类别",
			totalNums: "N",
			totalPages: "N",
			num: 1,
			goodscategorys: [],
			viewcategorys: [],
			firstclass: "actives",
			secondclass: "unableclick",
			thirdclass: "ableclick",
			fourthclass: "ableclick",
			uurl: "",
		}
	},
	created() {
		this.uurl = "https://getman.cn/mock/gxjy/get/goodsCategory"
	},
	beforeCreate() {
		this.$http
			.post("http://120.76.56.2:3000/good/category/get")
			.then(ret => {
				this.goodscategorys = ret.data
				this.totalNums = this.goodscategorys.length
				this.viewcategorys = this.goodscategorys.splice(
					this.num - 1,
					10
				)
				this.totalPages = Math.ceil(this.totalNums / 10)
			})
	},
	components: {
		Header,
		Operate,
		Footer,
	},
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/Goodscategory.scss";
</style>
